<template>
  <div>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" @expand-change="onExpandChange"
      :expand-row-keys="expandedKeys"
              :row-key="pk"
    >
      <el-table-column type="selection" width="55" align="center" v-if="showSection"/>
<!--      <el-table-column type="index" label="序号" align="center" v-if="true" width="70px"/>-->
      <el-table-column type="expand" v-if="showExpand">
        <template  #default="{ row,$index }">
          <slot name="expand" :row="row" :index="$index" ></slot>
        </template>
      </el-table-column>
      <el-table-column :label="item?.name" align="center" :prop="item?.code"
                       :width="item.width"
                       v-for="(item, index) in thead" :key="index">
        <template #default="{ row,$index }">
          <slot :name="item.code" :index="$index" :row="row">{{ item.date ? (row[item.code] && dayjs(row[item.code]).format('YYYY-MM-DD HH:mm:ss')) : row[item.code] }}</slot>
        </template>

      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                       :width="`${80 * btns.length}px;`" v-if="showAction">
        <template #default="scope">
          <slot name="btn" :row="scope.row" :index="scope.$index">
            <div class="flex-center" v-style="`gap:10px`">
              <span v-for="(item, index) in btns" :key="index" v-style="`gap:10px`">
                <span
                  class="cursor-pointer"
                  :style="`color:${item.color}`"
                  @click="
                    handleClick({
                      row: scope.row,
                      index:scope.$index,
                      code: item.code
                    })
                  "
                >
                  {{ item.name }}
                </span>

                <span v-style="`color:#e7e7e7;margin-left:10px`"
                      v-if="index !== btns.length - 1">|</span>
              </span>
            </div>
          </slot>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize" @pagination="getList"/>
  </div>
</template>
<script setup lang="ts">
import dayjs from "dayjs";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
    }
  },
  thead: {
    type: Array,
    required: false,
    default: () => []
  },
  btns: {
    type: Array,
    required: false,
    default: () => []
  },
  list: {
    type: Array,
    required: false,
    default:() => []
  },
  loading: {
    type: Boolean,
    required: false,
    default: () => false
  },
  total: {
    type: Number,
    required: false,
    default: () => 0
  },
  params: {
    type: null,
    required: false,
    default: () => ''
  },
  pk: {
    type: String,
    required: false,
    default: () => 'id'
  },
  showAction: {
    type: Boolean,
    default:  () => true
  },
  showSection: {
    type: Boolean,
    default: () => true
  },
  showExpand: {
    type: Boolean,
    default: () => false
  }
});

const emit = defineEmits(['execute', 'update:modelValue']);

const single = ref(true);
const multiple = ref(true);

const expandedKeys=ref([])

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
});

const getList = () => {
  emit('execute', {
    type: 'pagination',
    data: {
      params: props.params,
      queryParams: queryParams.value
    }
  });
};

const handleSelectionChange = (selection) => {
  let ids = selection.map((item) => item[props.pk]);
  single.value = selection.length != 1;
  multiple.value = !selection.length;

  emit('execute', {
    type: 'selectionChange',
    data: {
      params: props.params,
      ids
    }
  });
};

const onExpandChange=(row, expanded)=>{
  console.log("11111111111",expanded,row)
  expandedKeys.value=expanded.map(item=>{
    return item[props.pk]
  })
  // if (expanded) {
  //   expandedKeys.value.push(row[props.pk]); // 展开时添加 key
  // } else {
  //   expandedKeys.value = expandedKeys.value.filter(key => key !== row[props.pk]); // 关闭时移除 key
  //
  //   console.log(    expandedKeys.value,"=====")
  //
  // }
}

const handleClick = ({row, code,index}) => {
  emit('execute', {
    type: code,
    data: {
      params: props.params,
      row,
      index
    }
  });
};

watch(
  () => props.modelValue,
  () => {
    queryParams.value = props.modelValue;
  },
  {
    deep: true,
    immediate: true
  }
);
</script>
<style scoped lang="scss">
:deep(.el-table__header-wrapper){
  thead{
    .el-table__cell{
      background: #F7F7FB;

      .cell{
        color:#524E74 !important;
        font-weight: normal;
      }

      &:nth-of-type(1){
        border-radius: 8px 0 0 8px;
      }

      &:nth-last-of-type(1){
        border-radius: 0 8px 8px 0;
      }
    }
  }
}
</style>
